<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <title>Carousel</title>
    <link rel="stylesheet" href="./css/carousel.css">
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    <div id="app">
        
    
        <div class="container" style="height: 300px;">
            淡入
            <carousel :time="3" effect="fade" :autoplay="true" :loop="true">
                <carousel-list>
                    <carousel-item v-for="(item,index) in list" @click="openDetail">
                        <img :src="item.src" />
                    </carousel-item>
                </carousel-list>
            </carousel>
        </div>
        <div  class="container">
            分页器
            <carousel :time="5" effect="slide" :autoplay="true" :loop="true">
                <carousel-list>
                    <carousel-item v-for="(item,index) in list" @click="openDetail">
                        <img :src="item.src" />
                    </carousel-item>
                </carousel-list>
                <template v-slot:pagination></template>

            </carousel>
        </div>
        <div class="container">
            不循环
            <carousel :time="3" effect="slide" :autoplay="false" :loop="false">
                <carousel-list>
                    <carousel-item v-for="(item,index) in list" @click="openDetail">
                        <img :src="item.src" />
                    </carousel-item>
                </carousel-list>
            </carousel>
        </div>
    </div>
</body>
<script type="importmap">
    {
        "imports": {
            "vue": "https://cdn.jsdelivr.net/npm/vue@3.1.4/dist/vue.esm-browser.js",
            "carousel": "/js/carousel/index.js"
        }
    }
</script>
<script src="./js/main.js" type="module"></script>

</html>